let imgflag = false
$('#username')[0].oninput = function () {
  $('.clear_user').css('display', 'block')
}
$('.clear_user').click(function () {
  $('#username').val('')
})
$('#username')[0].onfocus = function () {
  $('.form-user>label').css('background-position', '0px -48px')
}
$('#username')[0].onblur = function () {
  $('.form-user>label').css('background-position', '0px 0px')
  $('.clear_user').css('display', 'none')
}
$('#password')[0].oninput = function () {
  $('.clear_pass').css('display', 'block')
}
$('.clear_pass').click(function () {
  $('#password').val('')
})
$('#password')[0].onfocus = function () {
  $('.form-pass>label').css('background-position', '-48px -48px')
}
$('#password')[0].onblur = function () {
  $('.form-pass>label').css('background-position', '-48px 0px')
  $('.clear_pass').css('display', 'none')
}
let mySlideImage = new SlideImageVerify('#slideImageWrap', {
  slideImage: ['image/a1.png', 'image/a2.png', 'image/a3.png'],
  slideAreaNum: 5,
  refreshSlide: true,
  getSuccessState: function (res) {
    if (res) {
      let username = $('#username').val()
      let password = $('#password').val()
      $('.regSlidelmageBox').css({ display: 'none' })
      mySlideImage.resizeSlide()
      axios.get(loginUrl, { params: { username, password } }).then((res) => {
        console.log(res.data)
        if (res.data.code) {
          imgflag = true
          localStorage.setItem('id', res.data.data.id)
          localStorage.setItem('username', res.data.data.username)
          localStorage.setItem('token', res.data.data.token)
          $('.testlogin').css('display', 'none')
          location.href = 'index.html'
        } else {
          $('.testlogin').css('display', 'block')
        }
      })
    } else {
      imgflag = false
    }
  },
})
$('.close').click(function () {
  $('.regSlidelmageBox').css({ display: 'none' })
})
$('.form-login-btn').click(function () {
  if ($('#username').val() == '' || $('#password').val() == '') {
    $('.testlogin').css('display', 'block')
  } else {
    $('.regSlidelmageBox').css({ display: 'block' })
  }
})
let oa = document.querySelectorAll('.login-bar')
let ob = document.querySelectorAll('.form_bar')
Array.from(oa).forEach(function (item, i) {
  item.onclick = function () {
    Array.from(oa).forEach(function (a) {
      a.classList.remove('check')
    })
    Array.from(ob).forEach(function (b) {
      b.style.display = 'none'
    })
    this.classList.add('check')
    ob[i].style.display = ' block'
  }
})
$('.form2-con').mouseenter(function () {
  $('.form-left')
    .stop(true, false)
    .animate(
      {
        left: '0',
      },
      function () {
        $('.form-right').css('display', 'block')
      }
    )
})
$('.form2-con').mouseleave(function () {
  $('.form-right').css('display', 'none')
  $('.form-left').stop(true, false).animate({
    left: '75px',
  })
})
